<template>
  <div style="padding: 0; margin: 0">
    <div style="padding: 0; margin: 0">
      <div style="padding: 10px">
        &nbsp;&nbsp;&nbsp;
        <el-button @click="preview">设计预览</el-button>
        <el-button @click="saveData">保存数据</el-button>
        <!-- <el-button @click="setData">加载数据</el-button> -->
        <!-- <el-button @click="setToken">设置Token</el-button> -->
        <el-button @click="showICO">示例图标</el-button>
        <!-- <el-input type="textarea" autosize placeholder="请输入应用名称" v-model="appidname" />
        <el-button @click="saveALLData">确认保存所有</el-button> -->
        <span style="color: #999"
          >&nbsp;&nbsp;&nbsp;看板名称：<span
            style="font-weight: bold; color: #2080f0"
            >{{ appName }}</span
          ></span
        >
      </div>
      <div style="padding: 0; margin: 0">
        <DataView ref="dataViewRef" />
      </div>
    </div>
    <el-dialog v-model="dialogTableVisible" title="保存数据" width="800">
      <el-input type="textarea" rows="15" v-model="saveValue" readonly />
    </el-dialog>
    <el-dialog v-model="diaToken" title="保存数据" width="800">
      <el-input type="textarea" rows="5" v-model="myToken" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="diaToken = false">取消</el-button>
          <el-button type="primary" @click="saveToken"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {
  DataView,
  useCanvasState,
  useUserStoreWithOut,
  showIconCard,
  useSnapshotState
} from "@/RtDataView/RonTonDataView";
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { saveDataView, getDataView } from "@/api/application";
import type { appDataView } from "./types";
import { useUserStoreHook } from "@/store/modules/user";

import getURL from "@/utils/http/address";
import { getToken } from "@/utils/auth";
const dialogTableVisible = ref(false);
const diaToken = ref(false);
const myToken = ref("");
const router = useRouter();
const route = useRoute();
const dataView = useCanvasState(); //获取看板数据对象
const dataViewRef = ref();
const layoutData = ref();
const saveValue = ref("");
const appName = ref(""); //看板名称
const appID = ref();
const dvID = ref(0);
const Token = useUserStoreWithOut(); //用于设置服务器访问Token
const snapShotState = useSnapshotState(); //获取预览数据
const userStore = useUserStoreHook();

const saveData = async () => {
  layoutData.value = {
    id: appID.value,
    name: appName.value,
    //thumbnail: dataView.thumbnail!,
    canvasData: dataView.layoutData,
    canvasStyle: dataView.canvasStyleData,
    dataSlotters: dataView.dataSlotterData
  };

  const dataViewForm = reactive<appDataView>({
    Id: Number(dvID.value),
    appID: appID.value,
    dataView: JSON.stringify(layoutData.value)
  });

  // DataViewForm.value.Id = 12;
  // DataViewForm.value.appID = appID.value;
  // DataViewForm.value.dataView = "";
  const rs = await saveDataView(dataViewForm);
  if (rs.isSuccess) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
  } else {
    ElMessage({
      message: rs.msg,
      type: "error"
    });
  }
  //saveValue.value = JSON.stringify(layoutData.value);
  //console.log("保存的数据" + JSON.stringify(saveValue));
  //dialogTableVisible.value = true;
};

const setData = getData => {
  const layoutComponents = {
    canvasData: getData.canvasData,
    canvasStyle: getData.canvasStyle,
    dataSlotters: getData.dataSlotters
  };
  if (layoutComponents) {
    dataView.setComponentData(layoutComponents.canvasData);
  }
  dataView.setLayoutData(layoutComponents);
};
onMounted(async () => {
  //读取数据库是否存在数据
  Token.setToken("Bearer " + getToken().accessToken);
  Token.setServerURL(getURL + "/api/DataView/");
  if (typeof route.query.id === "undefined") {
    const snapshot = await snapShotState.latestRecord();
    if (snapshot) {
      appName.value = userStore.appName;
      appID.value = userStore.appID;
      dvID.value = userStore.dvID;
      if (snapshot) {
        setData(snapshot);
      }
    }
  } else {
    appName.value = userStore.appName;
    appID.value = userStore.appID;
    // userStore.SET_APPID(appID.value);
    // userStore.SET_APPNAME(appName.value);
    const rs = await getDataView({ appId: appID.value });
    if (rs.result != null) {
      dvID.value = rs.result.id;
      userStore.SET_DVID(dvID.value);
      setData(JSON.parse(rs.result.dataView));
    }
  }
});

const preview = () => {
  //预览大屏
  //const { href } = router.resolve("/application/DataView/show");
  //window.open(href, "_blank");
  router.push("/application/DataView/show");
};

// const setToken = () => {
//   //打开Token设置对话框
//   diaToken.value = true;
// };
// const saveToken = () => {
//   //设置Token内容
//   Token.setToken(myToken.value);
//   ElMessage("Token设置成功");
//   diaToken.value = false;
// };

const showICO = () => {
  showIconCard();
};
</script>
